<!-- 左侧列表式模板 -->
<template>
  <div class="template-body">
    <section class="content-box">
      <section class="aside">
        <leftAsideList :propsData="propsData" :catList="catList"></leftAsideList>
      </section>
      <section class="content">
        <section class="ad">
          <classifyAd :propsData="propsData"></classifyAd>
        </section>
        <section class="nav-pic-list" v-if="propsData.params.styleType == 5">
          <div class="navPicItem" v-for="(item,index) in catList[0].children" :key="index">
            <img src="@/assets/images/diy/default_img.png" alt="" v-if="item.pic_url == ''"/>
            <img :src="item.pic_url" alt="" v-else/>
          </div>
        </section>
        <section class="nav-pic-list1" v-if="propsData.params.styleType == 4">
          <div class="navPicItem" v-for="(item,index) in catList[0].children" :key="index">
            <img src="@/assets/images/diy/default_img.png" alt="" v-if="item.pic_url == ''"/>
            <img :src="item.pic_url" alt="" v-else/>
            <span>{{item.name}}</span>
          </div>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import firstNav from "../components/firstNav/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList:{
      type: Array,
      default: () => {
        return []
      },
    }
  },
  mixins: [],
  components: { leftAsideList, classifyAd, goodsList, firstNav },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  padding-top: 6px;
  .content-box {
    height: 100%;
    display: flex;
    .aside {
      width: 101px;
      min-width: 101px;
      height: 100%;
      background-color: #f2f2f2;
    }
    .content {
      flex: auto;
      height: 100%;
      background: #ffffff;
      overflow-x: hidden;
      overflow-y: scroll;
      .ad {
        padding: 0 1px;
      }
      .nav-pic-list {
        padding: 5px 16px 0 16px;
        .navPicItem {
          width: 100%;
          height: 80px;
          background-color: #fff;
          border-radius: 5px;
          margin-bottom: 16px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .nav-pic-list1 {
          padding: 5px 16px 0 16px;
          display: flex;
          flex-wrap: wrap;
          .navPicItem {
              margin-right: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 15px;
              color: #808080;
              font-size: 12px;
              font-family: PingFang SC;
              overflow: hidden;
              img {
                  width: 70px;
                  height: 70px;
                  border-radius: 5px;
                  margin-bottom: 7px;
                  background-color: #fff;
              }
          }
          .navPicItem:nth-child(3n) {
              margin-right: 0;
          }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>
